<template>
<div class="container" >
  <div class="search">
    <search/>
  </div>
  <div class="scroll-imgs"  >
    <div class="imgs-item" v-for="item in imgList" :key="item" >
      <img :src="item" alt="未找到图片" >
    </div>
  </div>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
</template>
<script>
import search from "@/components/search";

  export default {
  name: 'recommendation',
  components:{
    search
  },
  mounted(){
    let si=document.getElementsByClassName("scroll-imgs")
    var children=si[0].children
    for (let i = 0; i < children.length; i++) {
      children[i].style.left+=i+'00%'
    }
    let j=0;
    setInterval(()=>{
      for (let i = 0; i < children.length; i++) {
        children[i].style.opacity=1
        children[i].style.left=parseInt(children[i].style.left)-100+'%'
      }
      if(children[j%3].style.left=='-200%'){
        children[j%3].style.left=children.length-2+'00%'
        children[j%3].style.opacity=0
        j+=1
      }
    },5000)
  },
 data(){
   return {
     imgList:[require("../imgs/1.jpg"),require('../imgs/2.jpg'),require('../imgs/3.jpg')]
   }
 },
  methods:{
    
  }
}
</script>
<style scoped>
.container{
  margin: 5px 20px 0px 20px;
}
.scroll-imgs{
  height: 130px;
  position: relative;
  overflow: hidden;

}
.imgs-item{
  width: 100%;
  height: 100%;
  position: absolute;
  transition: left 1s ease 0s;
  padding-left: 5px;
  padding-right:5px ;
}
.imgs-item img{
  width: 100%;
  border-radius: 10px;
}
.box{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: 10px 4px #6e6e6e;
  position: relative;
}
.box1{
  position: absolute;
  background: #fff;
  width: 50px;
  height: 40px;
  top: 5px;

  border-top-left-radius:10px 25px;
  border-top-right-radius:10px 25px;
  border-bottom-left-radius:10px 25px;
  border-bottom-right-radius:10px 25px;
}
.box2{
  position: absolute;
  background: #fff;
  left: 5px; 
  width: 40px;
  height: 50px;
  border-top-left-radius:25px 10px;
  border-top-right-radius:25px 10px;
  border-bottom-left-radius:25px 10px;
  border-bottom-right-radius:25px 10px;
}
</style>